{% extends 'base.html' %}

{% block title %}Certificate {{ certificate.verification_code }} — {{ site_settings.institute_name }}{% endblock %}

{% block extra_css %}
<style>
  .cert-sheet {
    background: #fffdf7;
    border: 10px solid #0f2557;
    border-image: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary), var(--brand-accent)) 1;
    padding: 2.5rem 2rem;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
  }
  .cert-sheet h1 { font-family: Georgia, "Times New Roman", serif; letter-spacing: .04em; }
  @media print {
    .no-print { display: none !important; }
    body { background: #fff !important; }
    .cert-sheet { box-shadow: none; border-width: 8px; }
  }
</style>
{% endblock %}

{% block content %}
<section class="py-4 no-print">
  <div class="container d-flex justify-content-between align-items-center flex-wrap gap-2">
    <a href="{% url 'certifications:verify' %}?code={{ certificate.verification_code }}" class="btn btn-outline-secondary btn-sm">
      <i class="bi bi-shield-check me-1"></i>Verification portal
    </a>
    <button onclick="window.print()" class="btn btn-primary btn-sm"><i class="bi bi-printer me-1"></i>Print</button>
  </div>
</section>

<section class="pb-5">
  <div class="container">
    {% if certificate.is_revoked %}
      <div class="alert alert-danger text-center">This certificate has been revoked.</div>
    {% endif %}
    <div class="cert-sheet shadow-sm rounded-4">
      <div class="text-uppercase text-muted small mb-2" style="letter-spacing:.2em;">{{ site_settings.institute_name }}</div>
      <h1 class="fw-bold mb-1">Certificate of Competency</h1>
      <p class="text-muted mb-4">This is to certify that</p>
      <div class="display-6 fw-bold mb-3" style="color:var(--brand-primary);">{{ certificate.recipient_name }}</div>
      <p class="mb-1">has successfully passed the professional examination for</p>
      <h3 class="fw-bold mb-4">{{ certificate.program_title }}</h3>
      <div class="row justify-content-center g-3 mb-4">
        <div class="col-auto">
          <div class="small text-muted">Score</div>
          <div class="fw-bold">{{ certificate.score_percent }}%</div>
        </div>
        <div class="col-auto">
          <div class="small text-muted">Issued</div>
          <div class="fw-bold">{{ certificate.issued_at|date:"d M Y" }}</div>
        </div>
      </div>
      <div class="border-top pt-3 mt-2">
        <div class="small text-muted">Verification code</div>
        <div class="font-monospace fw-bold fs-5">{{ certificate.verification_code }}</div>
        <div class="small text-muted mt-2">Verify at {{ request.get_host }}{% url 'certifications:verify' %}</div>
      </div>
    </div>
  </div>
</section>
{% endblock %}